/*
  学习目标：hooks的俩个使用限制
  1. 不要在循环，条件或嵌套函数中调用 Hook
  2. 只在 React 函数中调用 Hook
    1. 函数式组件: Xxxx
    2. 自定义钩子函数： useXxx

    // React函数 - React处理过的函数：
    // 1. 函数式组件: Xxxx
    // 2. 自定义钩子函数： useXxx 例如：useCount()

    // 普通函数：非React函数组件(class也不行)、非useXxx开头的函数

*/

// 快捷生成 rfc
import React, { useState } from 'react';

export default function App() {
  if (false) {
    // . hooks不能放在if/for等语句中
    // 💥React 是根据useState调用顺序，保证每个状态的值分配。React要求调用顺序永远不变
    // const [count, setCount] = useState(100);
  }
  // 按照官网介绍在最顶层调用即可
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello react');
  return (
    <div>
      我是App
      <div onClick={() => setCount(count + 1)}>{count}</div>
      <div onClick={() => setMsg(msg + '~')}>{msg}</div>
      <Child></Child>
    </div>
  );
}

// react函数- Xxx
function Child() {
  const [child, setChild] = useState(100);
  return <div>react-函数-Xxx格式 - {child}</div>;
}

// react函数- useXxxx
function useHooks() {
  const [child, setChild] = useState(100);
}
